<template>
  <y9Card :showHeader="false">
    <div class="toolbar">
      <div class="toolbar-left">
        <el-button :size="fontSizeObj.buttonSize"
                   :style="{ fontSize: fontSizeObj.baseFontSize }" v-if="multipleSelection.length && isFile" class="global-btn-second" v-on:click="download" plain>
          <i class="ri-download-2-line"></i>{{ $t('下载') }}
        </el-button>
        <el-button :size="fontSizeObj.buttonSize"
                   :style="{ fontSize: fontSizeObj.baseFontSize }" class="global-btn-second" @click="refresh" plain><i class="ri-refresh-line"></i>{{ $t('刷新') }}</el-button>
      </div>
      <div class="toolbar-right">
        <el-form :inline="true">
          <el-form-item :label="$t('文件名称')">
            <el-input v-model="searchKey" :placeholder="$t('输入文件名搜索')" class="search-input global-btn-second" clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button :size="fontSizeObj.buttonSize"
                           :style="{ fontSize: fontSizeObj.baseFontSize }" class="global-btn-second"><i class="ri-arrow-up-down-line"></i>{{ $t('排序') }}</el-button>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-radio v-model="orderProp" label="FILE_NAME"
                      @click.native="changeOrder($event, 'FILE_NAME')">{{ $t('文件名') }}</el-radio>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-radio v-model="orderProp" label="FILE_SIZE"
                      @click.native="changeOrder($event, 'FILE_SIZE')">{{ $t('文件大小') }}</el-radio>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-radio v-model="orderProp" label="CREATE_TIME"
                      @click.native="changeOrder($event, 'CREATE_TIME')">{{ $t('创建时间') }}</el-radio>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="nav">
      <div class="location">
        {{ $t('所在目录') }}：<span @click="backSuperior">{{ backSign }}</span>
        <span v-for="file in recursiveToRootFileNodeList" v-bind:key="file.id" v-bind:title="file.name"
          @click="subList(file)">
          {{ $t(file.name) }}
        </span>
      </div>
    </div>
    <el-form class="formClass" ref="fileForm" :model="formData">
      <el-progress v-if="uploadLoading" type="line" :percentage="percentage" :stroke-width="18" class="progress"
        status="success" :text-inside="true" :show-text="true"></el-progress>
      <y9Table ref="multipleTable" :config="y9TableConfig" v-loading="loading" :element-loading-text="loadingTitle"
        :empty-text="$t('暂无数据')"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
        @on-change="handleSelectionChange" @row-click="selectRow" @select-all="selectAll">
        <template #name="{ row, column, index }">
          <el-row @mouseenter="titleHover(row.id)" @mouseleave="titleLeave(row.id)">
            <el-col :span="22">
              <FileNameWithIcon :file-node="row" @folderClick="subList" @fileClick="openFile(row)" />
            </el-col>
            <el-col :span="2">
              <div class="optButtonCss" v-if="optButtonShow == row.id">
                  <el-tooltip v-if="row.collect" class="box-item" effect="light" :content="$t('取消收藏')" placement="top-start">
                    <i class="ri-star-line" @click="cancelCollect(row)"></i>
                  </el-tooltip>
                  <el-tooltip v-if="row.filePassword == '' || row.filePassword == null" class="box-item" effect="light" :content="$t('下载')" placement="top-start">
                    <i class="ri-download-2-line" @click="downloadFile(row.id)"></i>
                  </el-tooltip>
              </div>
            </el-col>
          </el-row>
        </template>
        <template #fileSize="{ row, column, index }">
          {{ row.fileSize ? row.fileSize : '-' }}
        </template>
        <template #collectRoute="{ row, column, index }">
          <el-tooltip :content="row.collectRoute" placement="top">
            <el-link v-if="row.listType=='my'" :title="row.collectRoute">{{ $t('我的文件') }}</el-link>
            <el-link v-else-if="row.listType=='shared'" :title="row.collectRoute">{{ $t('共享空间') }}</el-link>
            <el-link v-else-if="row.listType=='dept'" :title="row.collectRoute">{{ $t('部门文件') }}</el-link>
            <el-link v-else-if="row.listType=='public'" :title="row.collectRoute">{{ $t('公共文件') }}</el-link>
          </el-tooltip>
        </template>
        <template #place="{ row, column, index }">
          <div v-if="row.filePassword != null && row.filePassword != ''">
            <el-link v-if="row.parentFileNode" @click="openDecrypt(row)">
              {{ row.parentFileNode.name }}
            </el-link>
            <el-link v-else @click="openDecrypt(row)">{{ $t('全部文件') }}</el-link>
          </div>
          <div v-else>
            <router-link v-if="row.parentFileNode"
              v-bind:to="{ path: '/collect/index', query: { parentId: row.parentId, listType: listType } }">
              {{ row.parentFileNode.name }}
            </router-link>
            <router-link v-else to="/collect/index">{{ $t('全部文件') }}</router-link>
          </div>
        </template>
      </y9Table>
    </el-form>
    <y9Dialog v-model:config="dialogConfig">
      <!-- 视频播放器 -->
      <VideoPlayer v-if="dialogConfig.type == 'video'" :video_url="fileUrl" :poster="poster" />
      <!-- 视频播放器 -->
      <!-- txt,java,js,java,vue,css,xml文件预览-->
      <TextViewer v-if="dialogConfig.type == 'txt'" :fileId="fileId" :fileUrl="fileUrl" :fileName="fileName" />
      <!--音频文件预览-->
      <AudioPlayer v-if="dialogConfig.type == 'mp3'" :audioArray="audioArray" />
      <!--直链-->
      <FileLink v-if="dialogConfig.type == 'link'" :fileObject="fileObject" />
      <!--文件夹解密-->
      <DecryptPwd v-if="dialogConfig.type == 'DecryptPwd'" @openFolder="openFolder" :reloadTable="loadList"
        :dialogObj="dialogConfig" :fileObject="fileObject" />
    </y9Dialog>
  </y9Card>
</template>

<script lang="ts" setup>
import { ref, defineProps, onMounted, watch, computed, reactive, toRefs, nextTick } from 'vue';
import type { ElMessage, ElMessageBox } from 'element-plus';
import FileApi from '@/api/storage/file';
import FileNameWithIcon from '@/components/storage/FileNameWithIcon/index.vue';
import FileLink from '@/components/file/FileLink.vue';
import DecryptPwd from '@/components/storage/Folder/decrypt.vue';
import TextViewer from '@/components/file/TextViewer.vue';
import AudioPlayer from '@/components/file/AudioPlayer.vue';
import y9_storage from "@/utils/storage";
import settings from "@/settings";
import { useRoute, useRouter } from 'vue-router'
import { useStorageStore } from "@/store/modules/storageStore";
import { useSettingStore } from '@/store/modules/settingStore';
import posterImg from '@/assets/images/bg.jpg';
import { api as viewerApi } from "v-viewer";
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 注入 字体对象
const fontSizeObj: any = inject('sizeObjInfo')||{};
const router = useRouter()
// 获取当前路由
const currentrRute = useRoute()
const props = defineProps({
  parentId: {
    require: false,
    type: String
  },
  listType: {
    require: false,
    type: String,
  },
})
const storageStore = useStorageStore();
//调整表格高度适应屏幕
const tableHeight = ref(useSettingStore().getWindowHeight - 260 - 45);

window.onresize = () => {
  return (() => {
    tableHeight.value = useSettingStore().getWindowHeight - 260 - 45;
  })();
};
const data = reactive({
  uploadShowBtn: '',
  y9UserInfo: {},
  loadingTitle: '正在加载中......',
  fileObject: {},
  audioArray: [],
  fileId: '',
  fileName: '',
  fileUrl: '',
  poster: '',
  uploadLoading: false,
  percentage: 0,
  backSign: '',
  optButtonShow: '',
  buttonMore: false,
  selectedDate: '',
  listType: '',
  fileForm: '',
  formData: { id: '', parentId: '', name: '' },
  multipleTable: '',
  isFile: false,
  recursiveToRootFileNodeList: [],
  orderProp: 'CREATE_TIME',
  orderAsc: true,
  searchKey: '',
  multipleSelection: [],
  loading: false,
  y9TableConfig: {
    border: 0,
    height: tableHeight.value,
    pageConfig: false,
    columns: [
      {
        type: "selection", width: '55', selectable: (row) => {
          if (!row.filePassword) {
            return true
          }
        }
      },
      { title: computed(() => t("文件名")), key: "name", align: "left", width: 'auto', slot: 'name' },
      { title: computed(() => t("所有者")), key: "userName", align: "left", width: '170' },
      { title: computed(() => t("大小")), key: "fileSize", width: '120', slot: 'fileSize' },
      { title: computed(() => t("收藏路径")), key: "collectRoute", width: '150', slot: 'collectRoute' },
      { title: computed(() => t("创建日期")), key: "createTime", width: '170', },
    ],
    tableData: []
  },
  dialogConfig: {
    show: false,
    title: "",
    onOkLoading: true,
    onOk: (newConfig) => {

    },
    visibleChange: (visible) => {
      if (!visible) {
      }
    }
  },
});

let {
  y9UserInfo, y9TableConfig, loadingTitle, fileObject, audioArray, poster, fileId, fileName, fileUrl,
  uploadLoading, percentage, fileForm, formData, multipleTable,
  isFile, buttonMore,recursiveToRootFileNodeList, orderProp, orderAsc, searchKey,
  multipleSelection, loading, optButtonShow,
  dialogConfig, listType, selectedDate, backSign
} = toRefs(data);

onMounted(() => {
  y9UserInfo.value = y9_storage.getObjectItem('ssoUserInfo');
  loadList();
})

watch(() => [props.parentId],
  ([pId]) => {

    if (pId) {
      loadList();
    }
  }, {
  deep: true,
  immediate: true,
});

watch(() => searchKey.value,
  (val) => {
    loadList();
  }, {
  deep: true,
  immediate: true,
});

function titleHover(id) {
  optButtonShow.value = id;
}
function titleLeave(id) {
  if (buttonMore.value) {
    optButtonShow.value = id;
  } else {
    optButtonShow.value = '';
  }
}

function refresh() {
  selectedDate.value = '';
  searchKey.value = '';
  loadList();
}

function selectRow(row, column, event) {
  if (row.id != '') {
    if (!row.filePassword) {
      multipleTable.value.elTableRef.toggleRowSelection(row);
    }
    if(row.fileType!=0){
      isFile.value = true;
    }else{
      isFile.value = false;
    }
  } else {
    isFile.value = false;
    multipleTable.value.elTableRef.clearSelection();
  }
}

function selectAll(selection) {
  console.log('multipleSelection.value', multipleSelection.value);
}

function handleSelectionChange(id, data) {
  multipleSelection.value = data;
  console.log('selecy',data);
  if(data.length==1){
    if(data[0].fileType!=0){
      isFile.value = true;
    }else{
      isFile.value = false;
    }
  }

}

function loadList() {
  loading.value = true;
  if (orderProp.value == 'CREATE_TIME') {
    orderAsc.value = false;
  }
  FileApi.getCollectList(props.parentId, searchKey.value, props.listType, orderProp.value, orderAsc.value).then(res => {
    loading.value = false;
    y9TableConfig.value.tableData = res.data.subFileNodeList;
    recursiveToRootFileNodeList.value = res.data.recursiveToRootFileNodeList;
  });

}

function subList(row) {
  if (row.filePassword != '' && row.filePassword != null) {
    fileObject.value = row;
    Object.assign(dialogConfig.value, {
      show: true,
      width: '25%',
      title: computed(() => t('文件夹解密')),
      type: 'DecryptPwd',
      showFooter: false
    });
  } else {
      router.push({ path: '/collect/index', query: { parentId: row.id, listType: row.listType } });
  }
  backSign.value = t("返回上一级");
  if (row.id == 'collect') {
    backSign.value = '';
  }
}

function openDecrypt(row) {
  fileObject.value = row;
  Object.assign(dialogConfig.value, {
    show: true,
    width: '25%',
    title: computed(() => t('文件夹解密')),
    type: 'DecryptPwd',
    showFooter: false
  });
}

function openFolder(row) {
  router.push({ path: '/collect/index', query: { parentId: row.id, listType: props.listType } });
  backSign.value = t("返回上一级");
  if (row.id == 'collect') {
    backSign.value = '';
  }
}

function cancelCollect(row){
    FileApi.cancelCollect(row.id).then(res => {
      if(res.success){
        loadList();
      }
    });
}

async function backSuperior() {
  let res = await FileApi.getNetParentId(props.parentId);
  if (res.data != null) {
    if (res.data.parentId == 'collect') {
      backSign.value = '';
    } else {
      backSign.value = t('返回上一级');
    }

    router.push({ path: '/collect/index', query: { parentId: res.data.parentId, listType: props.listType } });
  }
}

function openFile(row) {
  let typeName = '', isShow = true, showMsg = false;
  fileUrl.value = encodeURI(row.fileUrl);
  fileName.value = row.name;
  fileId.value = row.fileStoreId;
  let docType = 'doc,docx,xls,xlsx,ppt,pptx,pdf';
  let txtType = 'txt,js,vue,java,css,scss,xml,ts,html,htm,json';
  if (row.fileType == 1) {
    isShow = false;
    viewerApi({
      images: [row.fileUrl],
    })
  } else if (row.fileType == 2) {
    if (docType.indexOf(row.fileSuffix) != -1) {
      isShow = false;
      showMsg = false;
      window.open(encodeURI(row.previewUrl + "?access_token=" + y9_storage.getObjectItem(settings.siteTokenKey, "access_token")), '_blank');
    } else if (txtType.indexOf(row.fileSuffix) != -1) {
      typeName = 'txt';
    } else {
      isShow = false;
      showMsg = true;
    }
  } else if (row.fileType == 3) {
    poster.value = posterImg;
    typeName = 'video';
  } else if (row.fileType == 4) {
    audioArray.value.push({ name: fileName.value, url: fileUrl.value });
    typeName = 'mp3';
  } else {
    isShow = false;
    showMsg = true;
  }
  if (showMsg) {
    ElMessage({ type: "info", message: t("该文件不支持预览！请下载到本地查看。"), offset: 65 });
  }
  Object.assign(dialogConfig.value, {
    show: isShow,
    width: '60%',
    title: computed(() => t(row.name)),
    type: typeName,
    showFooter: false
  });
}

function download() {
  multipleSelection.value.forEach(item => {
    if(item.fileType==0){
      ElMessage({ type: "info", message: t("选中的数据包含文件夹，请选择文件进行下载！"), offset: 65 });
      return;
    }
  });
  var IdArr = multipleSelection.value.map(item => item.id);
  window.open(import.meta.env.VUE_APP_CONTEXT + "vue/fileNode/downloadFile?ids=" + IdArr.join() + "&positionId=" + storageStore.currentPositionId + "&access_token=" + y9_storage.getObjectItem(settings.siteTokenKey, "access_token"), "_blank");
}

function downloadFile(id) {
  var IdArr = [];
  IdArr.push(id);
  window.open(import.meta.env.VUE_APP_CONTEXT + "vue/fileNode/downloadFile?ids=" + IdArr.join() + "&positionId=" + storageStore.currentPositionId + "&access_token=" + y9_storage.getObjectItem(settings.siteTokenKey, "access_token"), "_blank");
}

function logicDelete(ids) {
  ElMessageBox.confirm(t('确认要把所选文件放入回收站吗？删除的文件可通过回收站还原'), t('提示'), {
    confirmButtonText: t('确定'),
    cancelButtonText: t('取消'),
    type: 'info'
  }).then(() => {
    FileApi.delete(ids).then(res => {
      ElMessage({ type: res.success ? 'success' : 'error', message: res.msg, offset: 65 });
      loadList();
    });
  }).catch(() => {
    ElMessage({ type: "info", message: t("已取消操作"), offset: 65 });
  });
}

function changeOrder(e, order) {
  if (e.target.tagName === "INPUT") return;
  if (orderProp.value === order) {
    orderAsc.value = !orderAsc.value;
  } else {
    orderAsc.value = true;
  }
  orderProp.value = order;
  loadList();
}

</script>

<style lang="scss" scoped>
@import "@/theme/global.scss";

.formClass .el-form-item--default {
  margin-bottom: 0px;
}

.formClass .el-form-item {
  margin-bottom: 0px;
}

.formClass {
  :deep(.el-form-item__error) {
    color: var(--el-color-danger);
    font-size: 12px;
    line-height: 1;
    padding-top: 2px;
    position: relative;
    top: 0%;
    left: 2%;
  }

  :deep(.el-table) {
    .el-table__body {
      .el-table__row:hover {
        td {
          border-top: 1px solid var(--el-color-primary);
          border-bottom-color: var(--el-color-primary);
          border-left: 0px;
          border-right: 0px;
          background-color: var(--el-color-primary-light-9);
        }

        // td:nth-child(1) {
        //   border-left: 0px solid var(--el-color-primary);
        // }
        // td:last-child{
        //   border-right: 0px solid var(--el-color-primary);
        // }
      }

      .global-btn-main i {
        color: var(--el-color-white);
      }
    }
  }
}

.optButtonCss {
  i {
    color: var(--el-color-primary) !important;
  }

}

.optButtonCss i {
  color: var(--el-color-primary);
  font-size: 20px;
  margin-left: 15px;
}

:deep(.y9-dialog-content) {
  padding: 15px !important;
}

:deep(.el-form-item) {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 0px;
  .el-form-item__label {
    font-size: v-bind('fontSizeObj.baseFontSize');
  }
}

:deep(.aplayer-fixed) {
  position: relative !important;
  padding: 0px 360px;
}

:deep(.aplayer-body) {
  position: relative !important;
}

:deep(.el-date-editor--daterange) {
  width: 250px;
}

:deep(.el-table__cell .cell) {
  padding-left: 0px;
}

:deep(.el-table-column--selection .cell) {
  padding-left: 12px;
  padding-right: 12px;
}

:deep(.el-table__inner-wrapper::before) {
  height: 0px;
}

:deep(.el-dropdown) {
  line-height: 25px;
}

.tree-div {
  //width: calc(100% - 20px);
  height: 335px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #f2f2f2;
}

.toolbar:after {
  clear: both;
  content: '';
  display: block;
}

.toolbar-left {
  float: left;
  display: flex;
  align-items: center;
}

.toolbar-right {
  /* display: inline-block; */
  float: right;
}

.search-input {
  width: 250px;
  margin-right: 10px;
  font-size: v-bind('fontSizeObj.baseFontSize');
}

.upload-div {
  display: inline-block;
  margin-right: 10px;
}

.nav {
  font-size: v-bind('fontSizeObj.baseFontSize');
  padding: 15px 0 11px 0;
}

.back {
  display: inline-block;
}

.back span:first-child {
  color: var(--el-color-primary);
  cursor: pointer;
}

.back .divider {
  margin-left: 10px;
  margin-right: 10px;
}

.location {
  display: inline-block;
}

.location span {
  color: var(--el-color-primary);
  cursor: pointer;
  margin-right: 5px;
}

.location span:after {
  content: ' >';
}

.location span:last-child {
  color: black;
}</style>
